<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.hxy_scl_name" placeholder="请选择学校" readonly @focus="schoolVisible = true" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.keyword" placeholder="请输入教师卡号/姓名" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="search.scl_role" placeholder="请选择角色">
                <el-option v-for="(value, key, index) in tea_role_dic" :key="index" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getTeaPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <el-row :gutter="16">
        <!-- 教师列表 -->
        <el-col :span="8">
          <div class="main-header">
            <el-row :gutter="20">
              <el-col :span="8" class="left">角色列表</el-col>
              <el-col :span="16" class="right">
                <span v-if="auth.save != -1" class="spp-btn spp-btn-primary" @click="setTeaEditVisible()">新增</span>
                <span v-if="auth.sync != -1" class="spp-btn" @click="teaSyncSubmit()">同步教师</span>
              </el-col>
            </el-row>
          </div>
          <el-table ref="table" :data="tea_paginate_data" :height="height-100" size="mini" stripe @row-click="getTeaInfo" >
            <el-table-column label="序号" type="index" width="60" />
            <el-table-column label="选择" width="60">
              <template slot-scope="scope">
                <i v-if="tea_info_data.tea_id === scope.row.tea_id" class="el-icon-circle-check"></i>
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="tea_name" min-width="80" align="left" />
            <el-table-column label="手机号" prop="tea_phone" min-width="120" align="left" />
            <el-table-column label="操作" min-width="100" fixed="right" align="left">
              <template slot-scope="scope">
                <el-button type="text" v-if="auth.update != -1" @click="getTeaDetail(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getTeaPaginateData" />
        </el-col>
        <!-- 教师详情 -->
        <el-col :span="16">
          <!-- 教师信息 -->
          <div style="margin: 16px 10px">教师信息</div>
          <table class="tea_info_view">
            <tr>
              <td rowspan="4" style="width:100px;">
                <img src="../../../assets/images/photo.png" alt="" width="90">
              </td>
            </tr>
            <tr>
              <td class="lable">姓名</td>
              <td>
                <span>{{tea_info_data.tea_name}}</span>
                <img v-if="tea_info_data.tea_sex === '1'" class="tea_sex" src="../../../assets/images/man.png" alt="">
                <img v-if="tea_info_data.tea_sex === '2'" class="tea_sex" src="../../../assets/images/girl.png" alt="">
              </td>
              <td class="lable">卡号</td>
              <td>{{tea_info_data.tea_no}}</td>
            </tr>
            <tr>
              <td class="lable">手机</td>
              <td>{{tea_info_data.tea_phone}}</td>
              <td class="lable">app状态</td>
              <td>{{tea_info_data.app_reg_flag==='0'?'未注册':'已注册'}}</td>
            </tr>
            <tr>
              <td class="lable">app注册时间</td>
              <td>{{tea_info_data.app_reg_time ? formatDateTime(tea_info_data.app_reg_time) : '--'}}</td>
              <td class="lable"></td>
              <td></td>
            </tr>
          </table>
          <!-- 任职情况 -->
          <el-tabs type="border-card" style="margin-top:16px;">
            <el-tab-pane label="当前任职情况">
              <div style="padding-bottom:8px;overflow: hidden;">
                <span v-if="auth.save != -1" class="spp-btn spp-btn-primary fr" @click="setTeaJobEditVisible('1')">追加当前任职情况</span>
              </div>
              <el-table ref="table" :data="tea_job_now_data" :height="height-325" size="mini" stripe>
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column label="班级" prop="cls_name" min-width="80" align="left" />
                <el-table-column label="科目" prop="subject_name" min-width="120" align="left" />
                <el-table-column label="角色" min-width="100" fixed="right" align="left">
                  <template slot-scope="scope">
                    <div>{{tea_role_dic[scope.row.role_flag]}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100" fixed="right" align="left">
                  <template slot-scope="scope">
                    <el-button type="text" v-if="auth.update != -1" @click="teajobDelete(scope.row.tea_job_id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="历史任职情况">
              <div style="padding-bottom:8px;overflow: hidden;">
                <span v-if="auth.save != -1" class="spp-btn spp-btn-primary fr" @click="setTeaJobEditVisible('0')">追加历史任职情况</span>
              </div>
              <el-table ref="table" :data="tea_job_history_data" :height="height-325" size="mini" stripe>
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column label="班级" prop="cls_name" min-width="80" align="left" />
                <el-table-column label="科目" prop="subject_name" min-width="120" align="left" />
                <el-table-column label="角色" min-width="100" fixed="right" align="left">
                  <template slot-scope="scope">
                    <div>{{tea_role_dic[scope.row.role_flag]}}</div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <!-- 选择学校 -->
    <el-dialog title="选择学校" :visible.sync="schoolVisible" :close-on-click-modal="false" width="750px" class="school_view">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <SelectSchool @selectSchool="selectSchool" />
      </el-scrollbar>
    </el-dialog>
    <!-- 新增编辑教师 -->
    <el-dialog :title="tea_edit_form.title" :visible.sync="teaEditVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="tea_edit_form" label-width="20px" :model="tea_edit_form">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="tea_name">
                <div class="form_lable">姓名</div>
                <el-input v-model="tea_edit_form.tea_name" placeholder="请输入教师姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tea_phone">
                <div class="form_lable">手机号</div>
                <el-input v-model="tea_edit_form.tea_phone" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="scl_role">
                <div class="form_lable">角色</div>
                <el-select v-model="tea_edit_form.scl_role" placeholder="请选择角色">
                  <el-option v-for="(value, key, index) in tea_role_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tea_sex">
                <div class="form_lable">性别</div>
                <el-radio-group v-model="tea_edit_form.tea_sex">
                  <el-radio v-for="(value, key, index) in sex_dic" :key="index" :label="key">{{value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="rec_att_msg_flag">
                <div class="form_lable">是否接收考勤短信</div>
                <el-select v-model="tea_edit_form.rec_att_msg_flag" placeholder="请选择">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <span class="spp-btn" @click="teaEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="teaEditSubmit()">保存</span>
      </div>
    </el-dialog>
    <!-- 新增编辑任职 -->
    <el-dialog :title="tea_job_edit_form.title" :append-to-body="true" :visible.sync="teaJobEditVisible" width="720px" :close-on-click-modal="false">
      <el-form ref="tea_job_edit_form" label-width="0">
        <el-form-item>
          <div class="form_lable">年级</div>
          <el-select v-model="tea_job_edit_gra_id" clearable placeholder="请选择年级">
            <el-option v-for="(item, k) in gra_dic" :key="k" :label="item.gra_name" :value="k" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="form_lable">班级</div>
          <el-select v-model="tea_job_edit_form.hxy_cls_id" clearable placeholder="请选择班级">
            <el-option v-for="item in tea_job_edit_class_dic" :key="item.hxy_cls_id" :label="item.cls_name" :value="item.hxy_cls_id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="subject_name">
          <div class="form_lable">科目</div>
          <el-input v-model="tea_job_edit_form.subject_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="role_flag">
          <div class="form_lable">角色</div>
          <el-select v-model="tea_job_edit_form.role_flag" placeholder="请选择角色">
            <el-option v-for="(value, key, index) in tea_role_dic" :key="index" :label="value" :value="key"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <span class="spp-btn" @click="teaJobEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="teaJobEditSubmit()">保存</span>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, save, update, sync, teaJobNow, teaJobHistory, jobDelete, jobSave } from '@/api/pajx/pajx/teacher'
import { tea_role, sex, gra } from '@/api/public'
import { formatClass, formatDateTime } from '@/utils/index'
import { mapState } from 'vuex'
import SelectSchool from '@/components/SelectSchool'
import Pagination from '@/components/Pagination'
export default {
  name: 'PajxTeacher',
  components: { SelectSchool, Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      tea_role_dic: [],
      sex_dic: [],
      gra_dic: [],
      tea_job_edit_class_dic: [],
      search: {
        hxy_scl_id: '',
        hxy_scl_name: '',
        scl_role: '',
        keyword: ''
      },
      schoolVisible: false,
      page: 1,
      page_size: 20,
      total: 0,
      tea_paginate_data: [],
      teaEditVisible: false,
      tea_edit_form: {
        title: '新增教师',
        type: 'add',
        hxy_stu_id: '',
        tea_name: '',
        tea_phone: '',
        scl_role: '',
        tea_sex: '',
        rec_att_msg_flag: '1'
      },
      tea_info_data: {},
      tea_job_now_data: [],
      tea_job_history_data: [],
      teaJobEditVisible: false,
      tea_job_edit_form: {
        title: '新增教师',
        type: 'add',
        hxy_scl_id: '',
        hxy_tea_id: '',
        hxy_cls_id: '',
        subject_name: '',
        role_flag: '',
        status_flag: ''
      },
      tea_job_edit_gra_id: ''
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    teaEditVisible(val) {
      if (val) {
        this.tea_edit_form.title = this.tea_edit_form.type==='add'?'新增教师':'编辑教师'
      }
      if (!val) {
        this.tea_edit_form.tea_id = ''
        this.tea_edit_form.tea_name = ''
        this.tea_edit_form.tea_phone = ''
        this.tea_edit_form.scl_role = ''
        this.tea_edit_form.tea_sex = ''
        this.tea_edit_form.rec_att_msg_flag = '1'
        this.tea_edit_form.type = 'add'
      }
    },
    teaJobEditVisible(val) {
      if (val) {
        this.tea_job_edit_form.title = this.tea_job_edit_form.status_flag==='1'?'追加当前任职':'追加历史任职'
      }
      if (!val) {
        this.tea_job_edit_gra_id = ''
        this.tea_job_edit_form.hxy_scl_id = ''
        this.tea_job_edit_form.hxy_tea_id = ''
        this.tea_job_edit_form.hxy_cls_id = ''
        this.tea_job_edit_form.subject_name = ''
        this.tea_job_edit_form.role_flag = ''
        this.tea_job_edit_form.status_flag = ''
      }
    },
    tea_job_edit_gra_id(val) {
      if (val) {
        this.tea_job_edit_class_dic = this.gra_dic[val].classes
        this.tea_job_edit_form.hxy_cls_id = ''
      }
    }
   },
  methods: {
    formatDateTime: formatDateTime,
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/pajx/tea/save')
      this.auth.update = this.permission.indexOf('/api/pajx/tea/update')
      this.auth.sync = this.permission.indexOf('/api/pajx/tea/sync')
    },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
      this.search.hxy_scl_id = ''
      this.search.hxy_scl_name = ''
    },
    // 选择学校
    selectSchool(data) {
      this.schoolVisible = false
      this.search.hxy_scl_id = data.hxy_scl_id
      this.search.hxy_scl_name = data.scl_name
      this.tea_edit_form.hxy_scl_id = data.hxy_scl_id
      this.getTeaPaginateData()
      gra(data.hxy_scl_id).then(response => {
        this.gra_dic = formatClass(response.data)
      })
    },
    // 获取字典列表
    getDicData() {
      tea_role().then(response => {
        this.tea_role_dic = response.data
      })
      sex().then(response => {
        this.sex_dic = response.data
      })
    },
    // 获取教师列表数据
    getTeaPaginateData() {
      if(!this.search.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      paginate(this.search, this.page, this.page_size).then(response => {
        this.tea_paginate_data = response.data.list
        this.total = response.data.totalRow
        this.tea_info_data = this.tea_paginate_data[0]
        this.getTeaJob()
      })
    },
    // 新增
    setTeaEditVisible() {
      if(!this.tea_edit_form.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      this.teaEditVisible = true
    },
    // 新增编辑教师
    teaEditSubmit() {
      // 新增
      if (this.tea_edit_form.type === 'add') {
        save(this.tea_edit_form).then(response => {
          this.teaEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTeaPaginateData()
        })
      }
      // 修改
      if (this.tea_edit_form.type === 'edit') {
        update(this.tea_edit_form).then(response => {
          this.teaEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTeaPaginateData()
        })
      }
    },
    // 编辑回显
    getTeaDetail(data) {
      this.teaEditVisible = true
      this.tea_edit_form.tea_id = data.tea_id
      this.tea_edit_form.tea_name = data.tea_name
      this.tea_edit_form.tea_phone = data.tea_phone
      this.tea_edit_form.scl_role = data.scl_role
      this.tea_edit_form.tea_sex = data.tea_sex
      this.tea_edit_form.rec_att_msg_flag = data.rec_att_msg_flag
      this.tea_edit_form.type = 'edit'
    },
    // 同步教师
    teaSyncSubmit() {
      this.$confirm('确认要同步教师信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sync(this.search.hxy_scl_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTeaPaginateData()
        })
      }).catch(() => {})
    },
    // 教师详情
    getTeaInfo(row) {
      this.tea_info_data = row
      this.getTeaJob()
      console.log(row)
    },
    // 任职情况
    getTeaJob() {
      teaJobNow(this.tea_info_data.hxy_tea_id).then(response => {
        this.tea_job_now_data = response.data
      })
      teaJobHistory(this.tea_info_data.hxy_tea_id).then(response => {
        this.tea_job_history_data = response.data
      })
    },
    // 删除任职
    teajobDelete(tea_job_id) {
      this.$confirm('确认要删除该岗位吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        jobDelete(tea_job_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTeaJob()
        })
      }).catch(() => {})
    },
    // 追加任职
    setTeaJobEditVisible(status_flag) {
      if(!this.tea_edit_form.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      this.teaJobEditVisible = true
      this.tea_job_edit_form.status_flag = status_flag
      this.tea_job_edit_form.hxy_scl_id = this.tea_info_data.hxy_scl_id
      this.tea_job_edit_form.hxy_tea_id = this.tea_info_data.hxy_tea_id
    },
    teaJobEditSubmit() {
      jobSave(this.tea_job_edit_form).then(response => {
        this.teaJobEditVisible = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getTeaJob()
      })
    }
  },
  created() {
    this.permissionAuth()
    this.getDicData()
    
  }
}
</script>
<style lang="scss">
.tea_info_view{
  border-collapse: collapse;
  width: 100%;
  td, th{
    border: 1px solid #E1E3E6;
    color: #2C2E33;
    font-size: 12px;
    padding: 16px;
  }
  .lable{
    color: #909399;
    background: #F5F7FA;
  }
  .tea_sex{
    width: 20px;
    position: relative;
    top: 3px;
  }
}

</style>
